<template>
	<!-- 搜索栏 -->
	<my-search @search='gotosearch'></my-search>

	<!-- 分类 -->
	<view class="cate-container">
		<!-- 左边 -->
		<scroll-view scroll-y="true" :style="{height:wh+'px'}" class="left-scroll-view">
			<block v-for="(item,i) in asidebar" :key="i">
				<view :class="['left-scroll-view-item',i=== active ? 'active' :'']" @click="activeChange(i)">
					{{item}}
				</view>
			</block>

		</scroll-view>
		<!-- 右边 -->
		<scroll-view scroll-y="true" :style="{height:wh+'px'}" class="right-scroll-view">
			<view class="cate-right">
				<view class="cate-right-item" v-for="(item,i) in rightList[active] " :key="i"
					@click="toClassify(item.text)">
					<image :src="item.url" mode="" class="cate-right-img"></image>
					<text class="cate-right-text">{{item.text}}</text>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		losedatastore
	} from '../../stroe/losedata.js'
	// 数据
	const asidebar = ref(["证件", "生活用品", "数码产品", "美妆护肤", "衣服物品", "饰品", "文娱", "其他"])
	const losedata = losedatastore()
	const rightList = ref([])
	rightList.value = losedata.rightlist
	const wh = ref(0)
	const active = ref(0)
	// 点击事件
	// 跳转
	const gotosearch = () => {
		uni.navigateTo({
			url: '/subpkg/search/search'
		})
	}
	const toClassify = (text) => {
		uni.navigateTo({
			url: `/subpkg/classifyList/classifyList?text=${text}`
		})
	}
	// 切换样式
	const activeChange = (i) => {
		active.value = i
	}
	onLoad(() => {
		// 获取窗口的高度再减去tabbar的高度就是scroll-view的高度，根据窗口变化而变化
		wh.value = uni.getWindowInfo().windowHeight - 50
	})
</script>

<style lang="less">
	.cate-container {
		display: flex;
		background-color: #fff;

		.left-scroll-view {
			width: 100px;

			.left-scroll-view-item {
				background-color: #f7f7f7;
				line-height: 60px;
				text-align: center;
				font-size: 12px;

				&.active {
					position: relative;
					background-color: #FFFFFF;

					&::before {
						content: '';
						display: block;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
						width: 3px;
						height: 30px;
						background-color: #007AFF;

					}
				}
			}
		}

		.cate-right {
			display: flex;
			// 自动换行
			flex-wrap: wrap;
			width: 100%;

			.cate-right-item {
				display: flex;
				flex-direction: column;
				margin-bottom: 10px;
				align-items: center;
				justify-content: center;
				// 一排三个
				width: 33.33%;

				image {
					width: 60px;
					height: 60px;
				}

				text {
					font-size: 12px;
				}
			}
		}
	}
</style>